iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 24
1
Modern Web

前端建置工具完全手冊系列 第 24

Day 24: postcss 的使用與設定

  • 分享至 

  • xImage
  •  

postcss 可說是相當於 css 的 babel ,可以轉換 css 的語法,同時它也是個 css 的 parser ,被用在像 stylelint 之類的 linter 的底層,如果要直接在終端機使用需要安裝:

$ yarn add --dev postcss postcss-cli

雖然 postcss 大部份情況下應該是搭配其它的工具,比如 webpack 來使用的,另外只安裝這兩個只是有了 postcss 的指令而已, postcss 本身並沒有做任何事情,所以還要安裝它的 plugin ,這邊就用 autoprefixer 來示範:

$ yarn add --dev autoprefixer

比如你有一個這樣的,檔名為 index.css 的 css :

.example {
  user-select: none;
}

你只要下:

$ yarn postcss -u autoprefixer -o main.css index.css

postcss 就會用 autoprefixer 處理你的 css 檔案並輸出成 main.css ,而 main.css 的內容會像這樣:

.example {
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

已經幫你加上各個瀏覽器的 prefix 了

postcss.config.js

postcs 的設定檔叫 postcss.config.js ,裡面主要有兩種設定,一種是 plugin 的:

module.exports = {
  plugins: [
    // tailwindcss 也是一個 plugin 喔
    require('tailwindcss'),
    require('autoprefixer'),
  ]
}

有的 plugin 支援選項的就可以讓你這樣使用:

module.exports = {
  plugins: [
    require('postcss-preset-env')({ stage: 0 }),
  ]
}

另一種設定是可以改變它的 parser ,比如要直接 parse scss 的話,就可以安裝 postcss-scss 然後設定:

module.exports = {
  syntax: 'postcss-scss',
}

甚至還可以加上一些其它的 plugin 讓 postcss 真的能編譯 scss ,只是那其實不好用,有些語法沒辦法支援

下一篇來寫個 postcss 的 plugin


上一篇
Day 23: Parcel plugin
下一篇
Day 25: 實作個 postcss plugin
系列文
前端建置工具完全手冊30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言